<script setup>
import { ref } from 'vue'
import axios from 'axios'

const username = ref('')
const password = ref('')
const passwordConfirm = ref('') // 新增确认密码
const email = ref('')
const code = ref('')

const sendCode = async () => {
  const res = await axios.post('/api/auth/sendEmailCode', { email: email.value })
  alert(res.data.message)
}

const register = async () => {
  if (password.value !== passwordConfirm.value) {
    alert('密码和确认密码不一致！')
    return
  }

  const res = await axios.post('/api/auth/register', {
    username: username.value,
    password: password.value,
    email: email.value,
    code: code.value
  })
  alert(res.data.message)
}
</script>

<template>
  <el-form @submit.prevent="register">
    <el-form-item label="用户名">
      <el-input v-model="username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="password" />
    </el-form-item>
    <el-form-item label="再次确认密码">
      <el-input type="password" v-model="passwordConfirm" />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="email" />
    </el-form-item>
    <el-form-item label="验证码">
      <el-input v-model="code" style="width: 60%" />
      <el-button @click="sendCode" style="margin-left: 10px;">发送验证码</el-button>
    </el-form-item>
    <el-button type="success" @click="register" block>注册</el-button>
  </el-form>
</template>
